function GameOver({ level, onRestart, onHome, playerName, percentile, showHighlight, onToggleHighlight }) {
    React.useEffect(() => {
        try {
            // Delay scroll by 0.5 second
            const scrollTimeout = setTimeout(() => {
                window.scrollTo({
                    top: document.documentElement.scrollHeight,
                    behavior: 'smooth'
                });
            }, 500);

            return () => clearTimeout(scrollTimeout);
        } catch (error) {
            reportError(error);
        }
    }, []);

    const shareOnTwitter = () => {
        try {
            let shareText;
            if (percentile.daily === null || percentile.all === null) {
                shareText = `🎮 I just reached Level ${level} in Color Find! Can you beat my score?\n\n`;
            } else {
                shareText = `🎮 I just reached Level ${level} in Color Find! Top ${100-percentile.daily}% today and top ${100-percentile.all}% all-time!\n\n🎯 Think you can beat my score? Try it yourself:\n`;
            }
            const shareUrl = 'https://5jqdmjxdwavv.trickle.host';
            const hashtags = 'ColorFind,ColorGame,BrainTeaser';
            
            const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}&hashtags=${encodeURIComponent(hashtags)}`;
            
            window.open(twitterUrl, '_blank');
        } catch (error) {
            reportError(error);
        }
    };

    return (
        <div 
            className="text-center p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl animate-fade-in relative"
            data-name="game-over"
        >
            <div className="absolute top-4 left-4 flex flex-col gap-2" data-name="tools">
                <button
                    onClick={onToggleHighlight}
                    className={`p-2 rounded-full transition-colors ${
                        showHighlight 
                            ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400' 
                            : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
                    }`}
                    title={showHighlight ? "Hide Answer" : "Show Answer"}
                    data-name="highlight-toggle"
                >
                    <svg 
                        xmlns="http://www.w3.org/2000/svg" 
                        className="h-5 w-5" 
                        fill="none" 
                        viewBox="0 0 24 24" 
                        stroke="currentColor"
                    >
                        {showHighlight ? (
                            <path 
                                strokeLinecap="round" 
                                strokeLinejoin="round" 
                                strokeWidth={2} 
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                            />
                        ) : (
                            <path 
                                strokeLinecap="round" 
                                strokeLinejoin="round" 
                                strokeWidth={2} 
                                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                            />
                        )}
                    </svg>
                </button>
                <ThemeToggle />
                <SoundToggle />
            </div>

            <button 
                onClick={shareOnTwitter}
                className="absolute top-4 right-4 p-2 text-[#1DA1F2] hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded-full transition-colors"
                title="Share on Twitter"
                data-name="twitter-share-button"
            >
                <svg 
                    className="w-5 h-5" 
                    fill="currentColor" 
                    viewBox="0 0 24 24"
                >
                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                </svg>
            </button>

            <div className="mb-8" data-name="score-container">
                <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2" data-name="player-name">
                    {playerName}
                </h2>
                <p className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-4" data-name="level-reached">
                    Level {level}
                </p>
                <div className="space-y-2" data-name="percentile">
                    {percentile && percentile.daily !== null && percentile.all !== null ? (
                        <div className="inline-block bg-blue-50 dark:bg-blue-900/30 px-6 py-3 rounded-full">
                            <p className="text-base text-blue-800 dark:text-blue-200">
                                Top {100-percentile.daily}% today, top {100-percentile.all}% all-time
                            </p>
                        </div>
                    ) : (
                        <div className="inline-block bg-blue-50 dark:bg-blue-900/30 px-6 py-3 rounded-full">
                            <p className="text-base text-blue-800 dark:text-blue-200">
                                Loading rankings...
                                <LoadingSpinner size="sm" className="inline-block ml-2" />
                            </p>
                        </div>
                    )}
                </div>
            </div>

            <div className="space-y-4" data-name="button-container">
                <button 
                    className="w-full bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-xl transition duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
                    onClick={onRestart}
                    data-name="restart-button"
                >
                    Play Again
                </button>
                
                <button 
                    className="w-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-3 px-8 rounded-xl transition duration-200"
                    onClick={onHome}
                    data-name="home-button"
                >
                    Back to Home
                </button>

                <div className="border-t border-gray-200 dark:border-gray-700 my-4"></div>

                <a 
                    href="https://www.trickle.so" 
                    target="_blank" 
                    rel="noopener" 
                    className="block w-full trickle-badge text-white py-3 px-8 rounded-xl transition duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
                    data-name="build-app-button"
                >
                    <span className="text-sm font-medium">Build your own app with Trickle</span>
                </a>
            </div>
        </div>
    );
}
